<template>
  <div class="card form-card">
    <h2>{{ $t('register.title') }}</h2>
    <form @submit.prevent="onSubmit">
      <div class="form-row">
        <label>{{ $t('register.idNumber') }}</label>
        <input v-model="form.idNumber" required />
      </div>
      <div class="form-row">
        <label>{{ $t('register.name') }}</label>
        <input v-model="form.name" required />
      </div>
      <div class="form-row">
        <label>{{ $t('register.mobile') }}</label>
        <input v-model="form.mobile" required />
      </div>
      <div class="form-row">
        <label>{{ $t('register.password') }}</label>
        <input type="password" v-model="form.password" required />
      </div>
      <div class="form-row">
        <label>{{ $t('register.userType') }}</label>
        <select v-model="form.userType" required>
          <option value="citizen">Citizen</option>
          <option value="staff">Staff</option>
          <option value="admin">Admin</option>
        </select>
      </div>
      <button class="btn-primary" type="submit">{{ $t('register.submit') }}</button>
    </form>
    <div style="margin-top: 12px;">
      <router-link class="link" to="/login">{{ $t('register.haveAccount') }}</router-link>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'RegisterView',
  data() {
    return {
      form: {
        idNumber: '',
        name: '',
        mobile: '',
        password: '',
        userType: 'citizen'
      }
    }
  },
  methods: {
    async onSubmit() {
      try {
        await axios.post('/api/auth/register', this.form)
        this.$router.push('/login')
      } catch (e) {
        console.error(e)
        alert('Register failed')
      }
    }
  }
}
</script>

<style scoped>
/* Page-specific tweaks if needed */
</style> 